<script setup lang="ts">
import {reactive, computed, ref} from 'vue';
import {UserOutlined, LockOutlined} from '@ant-design/icons-vue';
import {getInfo, getlogin} from "@/api/home/login/login";
import {ElMessage} from "element-plus";
import router from "@/router";

const activeName = ref('first')
interface FormState {
    username: string;
    password: string;
    captcha: string;
    remember: boolean;
}

const formState = reactive<FormState>({
    username: '',
    password: '',
    captcha: '',
    remember: true,
});
const onFinish = (values: any) => {
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
    return !(formState.username && formState.password);
});

// 验证是否通过
let account = ref(false)
let passwordIn = ref(false)
let captcha = ref(false)
let phonenumber = ref(false)
// 用户名校验
const checkeName = function (rule, value) {
    if (value) {
        if (value.length > 17) {
            return Promise.reject("用户账号不能大于16位")
        } else {
            account.value = true
            return Promise.resolve();
        }
    } else {
        return Promise.reject("请输入用户账号")
    }

    // const reg = /^[0-9a-zA-Z]{1,16}$/
    // if (!reg.test(value)) {
    //     return Promise.reject("用户账号不得包含特殊字符")
    // } else {
}
// 手机号校验
const checkePhonenumber = function (rule, value) {
    if (value) {
        const reg = /^1[345789]\d{9}$/
        if (!reg.test(value)) {
            return Promise.reject("请输入正确的手机号格式 ")
        } else {
            phonenumber.value = true
            return Promise.resolve();
        }
    } else {
        return Promise.reject("请输入手机号")
    }

}
// 密码校验
const checkPassword = function (rule, value) {
    if (value) {
        passwordIn.value = true
        return Promise.resolve();
        // // 定义密码的正则表达式
        // const reg = /^[0-9a-zA-Z]{8,16}$/;
        //
        // if (reg.test(value)) {
        //     // 密码符合规则，返回成功的Promise
        //     passwordIn.value = true
        //     return Promise.resolve();
        // } else {
        //     // 密码不符合规则，返回失败的Promise并附带错误信息
        //     return Promise.reject("密码的长度应在8到16位之间");
        // }
    } else {
        // 如果没有输入值，返回失败的Promise并附带错误信息
        return Promise.reject("请输入密码");
    }
};
// 验证码校验
const captchaVerify = function (rule, value) {
    if (value) {
        captcha.value = true
        return Promise.resolve();
    } else {
        return Promise.reject("请输入验证码")
    }
}
let loginData = reactive({
    stuNum: '',
    password: ''
})


//
function login() {
    if ((account.value && passwordIn.value) || (phonenumber.value && passwordIn.value)) {
        loginData.stuNum = formState.username
        loginData.password = formState.password
        getlogin(loginData).then(res => {
            if (res.code == 500) {
                ElMessage.error(res.msg)
            }
            if (res.code == 200) {
                console.log(res)
                formState.username = ''
                formState.password = ''
                localStorage.setItem('token',res.token)

                getInfo().then(res=>{
                   localStorage.setItem('studentId',JSON.stringify(res.data.id))
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    router.go(-1)
                })


            }
        })
    }
}
</script>

<template>
  <!--登录-->
    <div>
        <div class="box">
            <div class="homePage">
                <router-link to="/index" style="display: block">
                    <img src="../assets/images/主页.png" alt="" class="homePageImg">
                </router-link>
                <div class="titlText">
                    <h2>您好</h2>
                    <h2>欢迎使用心理预约系统</h2>
                </div>
            </div>
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="账号登录" name="first">
                    <a-form
                        :model="formState"
                        name="normal_login"
                        class="login-form"
                        @finish="onFinish"
                        @finishFailed="onFinishFailed"
                        style="width: 100%; margin: auto"
                    >
                        <a-form-item
                            label="账号"
                            name="username"
                            :rules="[{ required: true, validator:checkeName, trigger: ['change','blur'] }]"
                        >
                            <a-input id="inputName" v-model:value="formState.username" placeholder="|  请输入账号">
                                <template #prefix>
                                    <UserOutlined class="site-form-item-icon"/>
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item
                            label="密码"
                            name="password"
                            :rules="[{
            required: true,
            validator:checkPassword,
            trigger: ['change','blur'],
        },]"
                        >
                            <a-input-password id="inputPassword" v-model:value="formState.password" placeholder="|  请输入密码">
                                <template #prefix>
                                    <LockOutlined class="site-form-item-icon"/>
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item>
                            <a-form-item name="remember" no-style>
                                <a-checkbox id="checkBox" v-model:checked="formState.remember">记住我</a-checkbox>
                            </a-form-item>
                        </a-form-item>

                        <a-form-item>
                            <a-button :disabled="disabled" type="primary" @click="login" html-type="button"
                                      class="login-form-button" :plain="true">
                                登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </el-tab-pane>
                <el-tab-pane label="手机登录" name="second">
                    <a-form
                        :model="formState"
                        name="normal_login"
                        class="login-form"
                        @finish="onFinish"
                        @finishFailed="onFinishFailed"
                        style="width: 100%; margin: auto"
                    >
                        <a-form-item
                            label="手机号"
                            name="username"
                            :rules="[{
            required: true,
            // message: '请输入手机号',
            trigger: ['change','blur'],
            validator:checkePhonenumber,
        }]"
                        >
                            <a-input v-model:value="formState.username" placeholder="|  请输入手机号">
                                <template #prefix>
                                    <UserOutlined class="site-form-item-icon"/>
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item
                            label="验证码"
                            name="password"
                            :rules="[{
            required: true,
            validator:captchaVerify,
            trigger: ['change','blur'],
        },]"
                        >
                            <a-input-password v-model:value="formState.password" placeholder="|  请输入验证码">
                                <template #prefix>
                                    <LockOutlined class="site-form-item-icon"/>
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item>
                            <a-form-item name="remember" no-style>
                                <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
                            </a-form-item>
                        </a-form-item>

                        <a-form-item>
                            <a-button :disabled="disabled" type="primary" @click="login" html-type="button"
                                      class="login-form-button" :plain="true">
                                登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<style scoped>
.box {
    padding: 1% 0;
    width: 100vw;
    height: 100vw;
    background: linear-gradient(rgba(40,140,234,0.9), rgba(40,140,234, 0.9)), url("../assets/images/背景图.jpg");
    .titlText {
        padding: 7% 5%;
        color: #fff;
        * {
            margin: 0;
            padding: 0;
        }
    }
}
.homePage {
    position: absolute;
    width: 88%;
    height: 100%;
    top: 2%;
    left: 5%;
    .homePageImg {
        width: 6%;
    }
}

#components-form-demo-normal-login .login-form {
    max-width: 80%;
}

#components-form-demo-normal-login .login-form-forgot {
    float: right;
}

#components-form-demo-normal-login .login-form-button {
    width: 100%;
}

.login-form-button {
    width: 100%;
}

>>> .el-tabs__nav-scroll{
    width:50%;
    margin:0 auto
}

>>> .el-tabs {
    margin: 30% auto;
    padding: 5% 8%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 3%;
}
</style>